<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="itheima" uri="http://systop.com/common/"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<title>Insert title here</title>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script
	src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"
	charset="utf-8"></script>
<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/bootstrap.min.css">
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
	form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

#back {
	background-image:
		url(${pageContext.request.contextPath }/images/sun.png);
	background-repeat: no-repeat;
	filter:
		"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
	   -moz-background-size: 100%  100%;
	       background-size: 100%  100%;
	  
}

#body {
	background: #fff;
	width: 1000px;
	margin: 0 auto;
	height: 100%;
	border-radius: 10px;
	background: #f2f2f5;
}

.table>thead>tr>th {
	text-align: center;
}

.order {
	float: right;
}

.fixed-bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
}
/* 清除ul样式 */
ul, li {
	padding: 0;
	margin: 0;
	list-style: none
}

#tname {
	color: #333;
	font-size: 27px;
	margin-left: 150px;
	font-weight: bolder;
	line-height: 200px;
}

#tname:hover {
	color: red;
}

html {
	height: 100%;
}

a {
	text-decoration: none;
	color: #333;
}

a:active {
	text-decoration: none;
}

#content {
	width: 450px;
	height: auto;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	margin-left: 70px;
}

textarea {
	outline: none;
	resize: none;
	border-radius: 6px;
	margin-left: 200px;
}

#showInfo {
	background-image:
		url(${pageContext.request.contextPath }/images/mai.jpg);
	background-size: 100%;
	width: 100%;
	height: 200px;
	background-repeat: no-repeat;
	border-radius: 10px 10px 0 0;
}

#footer {
	padding-top: 10px;
	width: 100%;
	height: 50px;
	background-color: #222;
	width: 100%;
}

#coopyright {
	color: #fff;
	margin: 0 80px;
}
</style>
<script type="text/javascript">
	$(function() {
		//页面加载完毕后开始执行的事件
		$(".reply_btn")
				.click(
						function() {
							$(".reply_textarea").remove();
							$(this)
									.parent()
									.append(
											"<div class='reply_textarea'><textarea name='' cols='40' rows='5'></textarea><br/><input type='submit' value='发表' /></div>");
						});
	});
	function sendCommit() {
		var replyInfo = $("#replyInfo").val();
		$.ajax({
			async : false,
			type : "post",
			url : "${pageContext.request.contextPath}/Reply/addReply",
			data : {
				replyInfo : replyInfo,
				messId : "${messById.messId}",
			},
			success : function(data) {
				if (data == "OK") {
					alert("评论成功！");
					window.location.reload();
				}
			},
			complete : function(xhr, status) {
				//拦截器拦截没有权限跳转
				// 通过xhr取得响应头
				var REDIRECT = xhr.getResponseHeader("REDIRECT");
				//如果响应头中包含 REDIRECT 则说明是拦截器返回的
				if (REDIRECT == "REDIRECT") {
					document.location.href = xhr
							.getResponseHeader("CONTEXTPATH");
				}
			}

		})	
	}
</script>
</head>
<body id="back">
	<div class="w">
		<header>
			<nav class="navbar navbar-inverse" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="${pageContext.request.contextPath }/Message/allMess">卓捷电子留言系统</a>
					</div>
					<div class="row">
						<ul class="nav navbar-nav order">
							<li class="active"><a href="${pageContext.request.contextPath }/Message/allMess">首页</a></li>
							<li><a
								href="${pageContext.request.contextPath }/Message/toNewMess">新留言</a></li>
							<li><a href="#"
								style="${sessionScope.user==null?'':'display:none'}">注册</a></li>
							<li><a
								href="${pageContext.request.contextPath }/User/tologin"
								style="${sessionScope.user==null?'':'display:none'}">登录</a></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								style="${sessionScope.user==null?'display:none':''}"
								data-toggle="dropdown" role="button" aria-haspopup="true"
								aria-expanded="false">${userName}<span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a
										href="${pageContext.request.contextPath }/User/exit">退出登录</a></li>
								</ul></li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- 中间区域S -->
		<article id="body">
			<!--hoster介绍  -->
			<header id="showInfo">
				<a href="javascript:void(0);" id="tname">#${messById.titleName}#</a>
				<span style="margin-left: 40px;"> 作者：<a
					href="javascript:void(0);" style="font-size: 17px;">${messById.author}</a>
				</span>
			</header>
			<hr style="height: 1px; border: none; border-top: 1px solid #d9d9d9;" />
			<!-- 留言内容区域 -->
			<section>
				<h3>
					<span class="label label-default" style="margin-left: 8px;">留言内容</span>
				</h3>
				&nbsp;&nbsp;
				<div sytle="margin:100px;font-size:19px" id="content">
					${messById.titleInfo}</div>
			</section>
			<hr style="height: 1px; border: none; border-top: 1px solid #d9d9d9;" />
			<!-- 回复区域S -->
			<section style="margin-left: 70px">
				<h3>
					<span class="label label-default" style="margin-left: -59px;">留言板</span>
				</h3>
				<table class="table table-striped">
					<thead style="vertical-align: middle !important;">
						<tr>
							<th>留言用户</th>
							<th>回复时间</th>
							<th>回复内容</th>
						</tr>
					</thead>
					<c:forEach items="${page.result }" var="reply">
						<tr style="text-align: center;">
							<td>${reply.replyAuthor }</td>
							<td>${reply.replyTime }</td>
							<td>${reply.replyInfo }</td>
						</tr>
					</c:forEach>
				</table>
				<div class="col-md-12 text-right">
					<center>
						<itheima:page
							url="${pageContext.request.contextPath }/Message/showTitleInfo/${id }" />
					</center>
				</div>
			</section>
			<!-- 回复区域E -->
			<hr style="height: 1px; border: none; border-top: 1px solid #d9d9d9;" />

			<!--评论区域S  -->
			<section>
				<h3>
					<span class="label label-default" style="margin-left: 12px;">评论区</span>
				</h3>
				<form>
					<textarea rows="10" cols="80" name="replyInfo" id="replyInfo"></textarea>
					<input type="button" class="btn btn-w3r"
						style="margin-left: 800px; margin-bottom: 2px" value="发表评论"
						onclick="sendCommit()">
				</form>
			</section>
			<!--评论区域E  -->
		</article>
		<!-- 中间区域E -->
	</div>
</body>
</html>